<template>
  <div class="width1200 margin-center mgt-20 ">
    <div class="breadcrumb flex-center">
      <p class="title">个人资料</p>
    </div>
    <div class="box">
      <el-row class="flex-center mgb-20">
        <el-col :span="2">头像：</el-col>
        <el-col :span="22"> <el-image class="cover" :src="headImg" fit="cover"></el-image></el-col>
      </el-row>
      <el-row class="flex-center mgb-20">
        <el-col :span="2">姓名：</el-col>
        <el-col :span="22"> <input type="text" readonly='true' v-model="list.name"></el-col>
      </el-row>
      <el-row class="flex-center mgb-20">
        <el-col :span="2">姓别：</el-col>
        <el-col :span="22"> <input type="text" readonly='true' v-model="list.sex"></el-col>
      </el-row>
      <el-row class="flex-center mgb-20">
        <el-col :span="2">所属组织：</el-col>
        <el-col :span="22"> <input type="text" readonly='true' v-model="list.organisation"></el-col>
      </el-row>
      <el-row class="flex-center mgb-20">
        <el-col :span="2">入驻时间：</el-col>
        <el-col :span="22"> <input type="text" readonly='true' v-model="list.date"></el-col>
      </el-row>
      <el-row class="flex-center mgb-20">
        <el-col :span="2">我的标签：</el-col>
        <el-col :span="22"> 
            <i class="tag" v-if="list.tag!=''" :key='tagIndex' v-for='(tag,tagIndex) in list.tag.split(",")'>{{tag}}</i>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      headImg:require("../../assets/img/图层 678@2x.png"),
      list: {
        img: require("../../assets/img/图层 10 拷贝@2x.png"),
        name: "李焦",
        sex:'女',
        organisation:'成都市泡桐树小学',
        tag: "基础班,—年级上册,第一单元",
        date: "2021-03-10",
      },
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
// @import "../assets/css/variable.less";
.cover{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}
.box{
    box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
    border-radius: 7px 7px 7px 7px;
    padding: 30px;
}
.tag{
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 10px;
    border: 1px solid #D8D8D8;
    display: inline-block;
    font-size:12px ;
  }
  input{
    width: 221px;
    height: 35px;
    background: #F9F9F9;
    border: 1px solid #D8D8D8;
    border-radius: 2px;
    padding: 0 15px;
    outline: none;
  }
</style>